<template>
  <div style="width: 800px; height: 500px">
    <div id="chartChina" ref="chartChina"></div>
  </div>
</template>

<script>
import chinaMap from 'echarts/map/json/china.json'
import { debounce } from '@/utils/utils.js'
// import '@/utils/auto-loop.js'

export default {
  chartTimerInterval: null,
  data() {
    return {
      myChart: null,
      myChartIndex: 0, // toolTips下标，循环播放
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.chartChina)
    this.initWithTimer()
  },
  beforeDestroy() {
    clearInterval(this.chartTimerInterval)
    this.chartTimerInterval = null
  },
  methods: {
    initWithTimer() {
      this.init()
      window.addEventListener('resize', debounce(() => {
        this.reInitChart();
      }, 1000))
    },
    reInitChart() {
      clearInterval(this.chartTimerInterval)
      this.chartTimerInterval = null
      this.init()
      this.myChart.resize()
    },
    init() {
      this.$echarts.registerMap('china', chinaMap)
      var option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'red',
          formatter: '地区：{b}<br/>模拟数据：{c}'
        },
        visualMap: {
          top: 'center',
          left: 'left',
          min: 10,
          max: 300000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            type: 'map',
            mapType: 'china',
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  textStyle: {
                    color: '#000000',
                    fontSize: FONTSIZE(32)
                  }
                }
              },
              zoom: 1,
              emphasis: {
                label: { show: true }
              }
            },
            top: '3%',
            data: [
              { name: '北京', value: 350000 },
              { name: '天津', value: 120000 },
              { name: '上海', value: 300000 },
              { name: '重庆', value: 92000 },
              { name: '河北', value: 25000 },
              { name: '河南', value: 20000 },
              { name: '云南', value: 500 },
              { name: '辽宁', value: 3050 },
              { name: '黑龙江', value: 80000 },
              { name: '湖南', value: 2000 },
              { name: '安徽', value: 24580 },
              { name: '山东', value: 40629 },
              { name: '新疆', value: 36981 },
              { name: '江苏', value: 13569 },
              { name: '浙江', value: 24956 },
              { name: '江西', value: 15194 },
              { name: '湖北', value: 41398 },
              { name: '广西', value: 41150 },
              { name: '甘肃', value: 17630 },
              { name: '山西', value: 27370 },
              { name: '内蒙古', value: 27370 },
              { name: '陕西', value: 97208 },
              { name: '吉林', value: 88290 },
              { name: '福建', value: 19978 },
              { name: '贵州', value: 94485 },
              { name: '广东', value: 89426 },
              { name: '青海', value: 35484 },
              { name: '西藏', value: 97413 },
              { name: '四川', value: 54161 },
              { name: '宁夏', value: 56515 },
              { name: '海南', value: 54871 },
              { name: '台湾', value: 48544 },
              { name: '香港', value: 49474 },
              { name: '澳门', value: 34594 }
            ]
          }
        ]
      }

      this.myChart.setOption(option)

      /**
       * 循环调用echarts的dispatchAction方法，触发UI的更新
       * showTip：显示提示框
       * downplay：取消高亮
       * highlight：高亮
       */
      this.chartTimerInterval = setInterval(() => {
        this.myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: this.myChartIndex
        })
        this.myChart.dispatchAction({
          type: 'downplay',
          dataIndex: this.myChartIndex - 1 > 0 ? this.myChartIndex - 1 : 0
        })
        this.myChart.dispatchAction({
          type: 'highlight',
          dataIndex: this.myChartIndex
        })

        this.myChartIndex++
        if (this.myChartIndex >= 34) {
          this.myChartIndex = 0
        }
      }, 3000)
      /**
       * 插件实现的循环，不完美。未同时出发地图高亮
       */
      window.tools.loopShowTooltip(this.myChart, option, {
        loopSeries: true
      });
    }
  }
}
</script>

<style scoped lang="scss">
#chartChina {
  width: 100%;
  height: 100%;
  background-color: transparent;
}
</style>
